Web Push - Tags - ohiruneuni/blog

2023 年 2 月にリリースされた iOS 16.4 beta 1 及び Safari 16.4 beta について、いくつか紹介します。

#Web Push のサポート

今までは Android などでしかサポートされていなかった Web Push が、iOS 16.4 beta 1 でサポートされました。ホーム画面に追加された Web アプリから、Push API、Notifications API、Service Worker などを駆使して、ユーザーにプッシュ通知を送ることが可能になります。

またホーム画面に追加された Web アプリでカウントを表示できる Badging API などもサポートされ、今後 PWA の利用が広がると期待されます。

https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/

#Many ECMAScript features supported

Safari 16.4 beta は、非常に巨大なリリースです。Web Push だけでなく ECMAScript の多くの機能が新たにサポートされました。

https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes

以下に、サポートされた機能のいくつかを軽く紹介します。

#Array.formAsync

Array.from が for 相当なのに対して、Array.fromAsync は for await と見れば理解しやすいと思います。 Async iterable を処理する方法として、Promise.all などがありますが、Promise.all が並列実行であるのに対して、 Array.fromAsync は for await 相当であり、順次実行されます。

https://github.com/tc39/proposal-array-from-async

#Array#group, Array#groupToMap

Array#group は、配列を指定した関数の戻り値でグルーピングしたオブジェクトを返します。一方、Array#groupToMap は、配列を指定した関数の戻り値でグルーピングした Map を返します。

https://github.com/tc39/proposal-array-grouping

コードを見た方が理解しやすいと思います。

const animals = [
  { name: "たま", type: "猫" },
  { name: "みけ", type: "猫" },
  { name: "ぽち", type: "犬" },
];
console.log(animals.group((animal) => animal.type));
/* result
{
  猫: [
    { name: 'たま', type: '猫' },
    { name: 'みけ',  type: '猫' },
  ],
  犬: [
    { name: 'ぽち', type: '犬', },
  ],
}
*/
console.log(animals.groupToMap((animal) => animal.type).get("猫"));
/* result
[
  { name: 'たま', type: '猫' },
  { name: 'みけ',  type: '猫' },
]
*/

#Import Maps

ブラウザで実行される import によって読み込まれるパッケージの URL を指定する手段です。

https://github.com/WICG/import-maps#multiple-import-map-support

html

<head>
  <script type="importmap">
    {
      "imports": {
        "react": "https://unpkg.com/react@18/umd/react.development.js",
        "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      }
    }
  </script>
</head>
<body>
  <script type="module">
    import { createRoot } from "react-dom/client";
    import React from "react";
  </script>
</body>

#AV1 のサポート

AV1 コーデックが Safari 16.4 beta でサポートされました。しかし、Apple の M1/M2 は AV1 用のハードウェアアクセラレータを搭載していないため、利用できる環境はほぼありません。

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.

All Posts

News bits

Safari 16.4 beta